<template>
	<view class="max-background">


		<view class="IDcardStraight">
			<view class="IdcardText">
				<view class="textTop">
					<text class="texttopFont">身份证正面</text>
				</view>
				<view class="textButton">
					<text>上传身份证</text>
					<text class="colorFont">人像面</text>
				</view>
			</view>
			
			<view class="IdcardZI">
				<block v-for="(item, index) in imglist3" :key="index">
					<view class='myimage'>
						<view class="MyIdcardZ">
							<image class='MyIdcardZImg' :src='item' mode='aspectFill'></image>
						</view>
						<view class='img-delete' @click='imgDelete3' :data-delindex="index">
							<uni-icons type="clear" color="red" size="20" />
						</view>
					</view>
				</block>
				<view class="MyIdcardZ" @click='addPic3' v-if="imglist3.length<9">
				</view>
			</view>
		</view>


		<view class="IDcardRebellion">
			<view class="IdcardText">
				<view class="textTop">
					<text class="texttopFont">身份证反面</text>
				</view>
				<view class="textButton">
					<text>上传身份证</text>
					<text class="colorFont">国徽面</text>
				</view>
			</view>

			<view class="IdcardFI">
					<block v-for="(item, index) in imglist2" :key="index">
					  <view class='myimage'>
						<view class="MyIdcardF">
							
							<image class='MyIdcardZImg' :src='item' mode='aspectFill'></image>
						</view>
						<view class='img-delete1' @click='imgDelete2' :data-delindex="index">
							<uni-icons  type="clear" color="red" size="20" />
						</view>
					  </view>
					</block>
					<view class="MyIdcardF" @click='addPic2'  v-if="imglist2.length<1">
					</view>		
				</view>
			</view>
		</uni-forms-item>
		<view class="foot">
			<view class="foottext">
				<uni-icons type="info-filled " size="20"  ></uni-icons>
				<text class="footfont">信息仅用于实名认证，世德物流保障您的信息安全</text>
			</view> 
			<view class="mybottom">
				<button class="button" type="primary" @click="updateRealIdCard">提交审核</button>
			</view>
		</view>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				file: {},
				tsRealNameAuthentication: {
					registerPhone: '1356985522',
					idCardFront: '',
					idCardOpposite: ''
				}, //选择图片后生成的临时地址数组
				imglist2: [],
				imglist3: [],
				
			}
		},
		methods: {
			
			//*选择图片*//
			addPic3: async function() {
				let that = this
				if (that.imglist3 == '') {
					uni.chooseImage({
						count: 1, // 默认最多一次选择9张图
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: res => {
							// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
							let tiemr = new Date();
							let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr
								.getDate();
							address = 'zskp/userHead/' + address + '/';
							var tempFilePaths = res.tempFilePaths[0];
							let str = res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.'));
							let nameStr = address + tiemr.getTime() + str;
							let ossUrl = 'http://localhost:8090/upload/imgUpload';
							uni.uploadFile({
								url: ossUrl, //输入你的bucketname.endpoint
								filePath: tempFilePaths,
								fileType: 'image',
								name: 'file',
								formData: {
									name: nameStr,
									key: nameStr,
									policy: 'eyJleHBpcmF0aW9uIjoiMjAyMy0wNi0yNlQwMjoyMjozOS4yMjJaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIyMDIzLTA2LTI2LyJdXX0=', // 输入你获取的的policy
									OSSAccessKeyId: 'LTAI5tJsR6uZnmEUoa4c5hzH', // 输入你的AccessKeyId
									success_action_status: '200', // 让服务端返回200,不然，默认会返回204
									signature: 'isMKvr1Wrwnd1zSpo/cgvCPKSNY=' // 输入你获取的的signature
								},
								success: res => {
									if (res.statusCode == '200') {
										const data = JSON.parse(res.data)
										console.log(data.data.uploadImg);
										this.tsRealNameAuthentication.idCardFront=data.data.uploadImg
										this.imglist3.push(data.data.uploadImg)
									} else {
										uni.showToast({
											title: '上传失败',
											icon: 'none',
											duration: 1000
										});
									}
								}
							})

						}
							
					})
				
				}
			},
			addPic2: async function() {
				let that = this
				if (that.imglist2 == '') {
					uni.chooseImage({
						count: 1, // 默认最多一次选择9张图
						sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
						success: res => {
							// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
							let tiemr = new Date();
							let address = tiemr.getFullYear() + '' + (tiemr.getMonth() + 1) + '' + tiemr
								.getDate();
							address = 'zskp/userHead/' + address + '/';
							var tempFilePaths = res.tempFilePaths[0];
							let str = res.tempFilePaths[0].substr(res.tempFilePaths[0].lastIndexOf('.'));
							let nameStr = address + tiemr.getTime() + str;
							let ossUrl = 'http://localhost:8090/upload/imgUpload';
							uni.uploadFile({
								url: ossUrl, //输入你的bucketname.endpoint
								filePath: tempFilePaths,
								fileType: 'image',
								name: 'file',
								formData: {
									name: nameStr,
									key: nameStr,
									policy: 'eyJleHBpcmF0aW9uIjoiMjAyMy0wNi0yNlQwMjoyMjozOS4yMjJaIiwiY29uZGl0aW9ucyI6W1siY29udGVudC1sZW5ndGgtcmFuZ2UiLDAsMTA0ODU3NjAwMF0sWyJzdGFydHMtd2l0aCIsIiRrZXkiLCIyMDIzLTA2LTI2LyJdXX0=', // 输入你获取的的policy
									OSSAccessKeyId: 'LTAI5tJsR6uZnmEUoa4c5hzH', // 输入你的AccessKeyId
									success_action_status: '200', // 让服务端返回200,不然，默认会返回204
									signature: 'isMKvr1Wrwnd1zSpo/cgvCPKSNY=' // 输入你获取的的signature
								},
								success: res => {
									if (res.statusCode == '200') {
										const data = JSON.parse(res.data)
										console.log(data.data.uploadImg);
										this.tsRealNameAuthentication.idCardOpposite=data.data.uploadImg
										this.imglist2.push(data.data.uploadImg)
									} else {
										uni.showToast({
											title: '上传失败',
											icon: 'none',
											duration: 1000
										});
										
									}
								}
							})
					
						}
					})
				}
			},

			//*显示选择后的图片*//
			imgbox3: function(e) {
				this.imglist3 = e.detail.value
				console.log('图片', this.imglist3)
			},
			//*显示选择后的图片*//
			imgbox2: function(e) {
				this.imglist2 = e.detail.value
				// console.log('图片', this.imglist2)
			},

			//* 删除已经选择的图片 *//
			imgDelete3: function(e) {
				let index = e.currentTarget.dataset
					.delindex; //获取要删除的图片的下标，否则删除的永远是第一张 ,对应 <view class='img-delect' @click='imgDelete1' :data-delindex="index">
				this.imglist3.splice(index, 1);
			},
			//* 删除已经选择的图片 *//
			imgDelete2: function(e) {
				let index = e.currentTarget.dataset
					.delindex; //获取要删除的图片的下标，否则删除的永远是第一张 ,对应 <view class='img-delect' @click='imgDelete1' :data-delindex="index">
				this.imglist2.splice(index, 1);
			},
			
			 async updateRealIdCard(){
				if(this.tsRealNameAuthentication.authenticationId===''){
					uni.showToast({
						title: '未注册',
						icon: 'none',
						duration: 1000
					});

				}
				if(this.tsRealNameAuthentication.idCardFront===''){
					uni.showToast({
						title: '请上传身份证正面',
						icon: 'none',
						duration: 1000
					});
				}
				if(this.tsRealNameAuthentication.idCardOpposite===''){
					uni.showToast({
						title: '请上传身份证反面',
						icon: 'none',
						duration: 1000
					});
				}
				if(this.tsRealNameAuthentication.authenticationId!==''&& this.tsRealNameAuthentication.idCardFront!==''&&this.tsRealNameAuthentication.idCardOpposite!==''){
					const result = await uni.$http.post("localhost:8090/tsRealNameAuthentication/updateRealIdCard",this.tsRealNameAuthentication);
					console.log(result.data)
					const {
						code,
						msg
					} = result.data
					
					if(code==1){
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 1000
						});
						setTimeout(()=>{
							uni.switchTab({  // uniapp跳转页面  保留当前页面  就是覆盖当前页面
								url:'/pages/myinfo/myinfo'  
							})
						},1600)
					}else if(code==2){
						uni.showToast({
							title: msg,
							icon: 'none',
							duration: 1000
						});
					}else{
						uni.showToast({
							title: '诶呀，连接太多了',
							icon: 'none',
							duration: 1000
						});
					}
					
				}
				
			},
			
		}
	}
</script>
<style lang="scss">
	.uni-wrap {
		flex-direction: column;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		flex: 1;
	}

	.scroll {
		flex-direction: column;
		flex: 1;
	}

	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}
</style>

<style>
	.img-delete {
		position: fixed;

		top: 260rpx;
		right: 60rpx;
	}

	.img-delete1 {
		position: fixed;

		top: 630rpx;
		right: 60rpx;
	}

	.upimg {
		width: 320rpx;
		height: 200rpx;

	}

	.upimgA {
		width: 500rpx;

		margin-left: 123rpx;
		margin-top: 50rpx;
		/* background-color: antiquewhite; */

	}

	.mybottom {
		width: 650rpx;
	}

	.mybottom {
		margin-left: 15rpx;
	}

	.foottext {
		margin-bottom: 30rpx;
		font-size: 25rpx;
		color: cornflowerblue;
		margin-left: 15rpx;
	}

	.foot {
		position: fixed;

		top: 1300rpx;
		left: 35rpx;

	}

	.MyIdcardZImg {
		width: 320rpx;
		height: 200rpx;
	}

	/* .MyIdcardF{
		position: fixed;
		
		top: 279rpx;
		right: 76rpx;
	} */
	.MyIdcardF {
		/* background-color: aqua; */
		position: fixed;

		top: 651rpx;
		right: 76rpx;
		width: 310rpx;
		height: 200rpx;

	}

	.MyIdcardZ {
		/* background-color: aqua; */
		position: fixed;

		top: 281rpx;
		right: 76rpx;
		width: 310rpx;
		height: 200rpx;

	}

	.IdcardZ {
		width: 400rpx;
		height: 260rpx;
	}

	.IdcardFI {
		width: 400rpx;
		height: 268rpx;
		background-color: aquamarine;
		float: left;
		margin-top: 38rpx;
		background-image: url("../../static/IdcardF.png");

		background-position: center center;
		background-size: cover;
	}

	.IdcardZI {
		width: 400rpx;
		height: 268rpx;
		background-color: aquamarine;
		float: left;
		margin-top: 38rpx;
		background-image: url("../../static/IdcardZ.png");

		background-position: center center;
		background-size: cover;
	}

	.colorFont {
		color: cornflowerblue;
		margin-left: 10rpx;
	}

	.textButton {
		display: block;
		font-size: 20rpx;
		color: darkgray;
		font-weight: 400;
		margin-top: 10rpx;
	}

	.texttopFont {
		display: block;
		margin-top: 140rpx;
	}

	.IdcardText {
		width: 280rpx;
		height: 340rpx;
		/* background-color: antiquewhite; */
		float: left;

	}

	.IDcardRebellion {

		background-color: #FFF;
		width: 680rpx;
		height: 340rpx;
		margin: 0 auto;
		border-radius: 9px;
		position: fixed;

		top: 580rpx;
		right: 35rpx;
		font-size: 30rpx;
		font-weight: 800;
	}

	.IDcardStraight {
		background-color: #FFF;
		width: 680rpx;
		height: 340rpx;
		margin: 0 auto;
		border-radius: 9px;
		position: fixed;

		top: 210rpx;
		right: 35rpx;
		font-size: 30rpx;
		font-weight: 800;
	}

	.max-background {
		text-align: center;
		width: 100%;
		height: 800px;
		background-color: #f1f3f3;

	}
</style>